<template>
  <!-- 左侧模块 -->
  <div class="right_box">
    <div class=" right_box_top pt20 pl20 pr20">
      <div class="mb30 font_weight colBlueTag ft24">应用案例</div>
      <div class="flex-bet font-weight ft40 colBlueTag">
        <div class="num_back">0</div>
        <div class="num_back">0</div>
        <div class="num_back">3</div>
        <div class="num_back">8</div>
        <div class="num_back">5</div>
      </div>
      <div class="mt20 font_weight colBlueTag ft18">案例占比</div>
      <div class="chart">
        <v-chart autoresize :option="caseLine"></v-chart>
      </div>
    </div>
    <div class="mt10 right_box_center colBlueTag pt20 ft24">
      <div class="pl30 font_weight">基地类型</div>
      <div class="chart_bing">
        <v-chart autoresize :option="bingLine"></v-chart>
      </div>
    </div>
    <div class="mt10 right_box_bottom pt20 ft12">
      <div class="table-back font_weight pl20 pr20">案例项目信息</div>
      <div class="over-scroll">
        <vue-seamless-scroll
          :data="dataList"
          :class-option="defaultOption"
        >
          <div v-for="(item, index) in dataList" :key="index" @click="toTop(item)" class="table-back pl20 pr20">
            <div class="flex-bet">
              <div class="one_lading">{{ item.name }}</div>
              <div></div>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import caseLine from '../echarts/caseLine'
import bingLine from '../echarts/bingLine'
export default {
  name: 'RightBox',
  components: {
  },
  props: {
    dataList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    defaultOption() {
      return {
        openTouch: true,
        step: 0.1, // 数值越大速度滚动越快
        limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        inSingleRemUnit: true
      }
    }
  },
  data() {
    return {
      caseLine,
      bingLine
    }
  },

  mounted() {

  },

  methods: {
    toTop(item) {
      this.$emit('getContentList', item.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.right_box {
  height: 100%;
  position: absolute;
  right: 30px;
  z-index: 9999;
}
.num_back {
  width: 48px;
  height: 46px;
  background: url("~@/assets/BG.png");
  background-size: 100% 100%;
  text-align: center;
  line-height: 46px;
}
.table-back {
  color: #fff;
  &:nth-child(2n - 1) {
    line-height: 24px;
    height: 24px;
    background: rgba(102,255,255,0.2);
  }
  &:nth-child(2n) {
    line-height: 24px;
    height: 24px;
    background: rgba(0,0,0,0.1);
  }
}
.flex-bet {
  display: flex;
  justify-content: space-between;
}
.right_box_top {
  width: 324px;
  height: 344px;
  background: #01233760;
}
.right_box_center {
  width: 324px;
  height: 323px;
  background: #01233760;
}
.right_box_bottom {
  width: 324px;
  height: 221px;
  background: #01233760;
}
::v-deep .chart {
  width: 300px;
  height: 180px;
  .echarts {
    width: 100%;
    height: 100%
  }
}
::v-deep .chart_bing{
  width: 100%;
  height: 270px;
  .echarts {
    width: 100%;
    height: 100%
  }
}
.over-scroll {
  height: 175px;
  overflow-y: hidden;
}
</style>
